<template>
  <div class="kInput" :class="[+type === 1 ? 'searchInput' : 'formInput',needClass,isSearch && 'isSearchAll']">
    <div class="inputParent" :class="`${isSearch && 'isSearch'} ${oneBd && 'oneBd'} ${needClass}`">
      <el-input
        v-model="modelValue"
        v-bind="$attrs"
        clearable
        :placeholder="placeholder"
        resize="none"
        :maxlength="(oneBd || isTextarea) ? countNum : countNum"
        :type="isTextarea ? &quot;textarea&quot; : &quot;text&quot;"
        @input="update"
        v-on="$listeners"
        @focus="iconFocusBorder = true"
        @blur="labelAndTip.needBlurCheck && checkValue"
        @clear="clearInput"
      />
      <i v-show="oneBd" class="countNum">{{ num }}</i>
      <i v-show="isTextarea" class="countNumText">{{ textNum }}/{{ countNum }}</i>
      <p v-if="isSearch" class="inputIcon" :class="{focusBorder:iconFocusBorder}" @click="searchFun">
        <svg-icon icon-class="search" />
      </p>
      <div v-show="showTips" class="formTip"><svg-icon icon-class="rederror" />{{ tips }}</div>
    </div>

  </div>
</template>

<script>
/**
  *其他属性见：https://element.eleme.cn/2.2/#/zh-CN/component/input
  *使用 ： <My-input
            type='2'
            ref='submitCheck'
            v-model='inputVal'
            :labelAndTip='{label:"常规", needCheck:true, tip: {trim:true}}'
            />
    提交时校验: this.$refs.submitCheck.checkValue()
 */
export default {
  name: 'KInput',
  inheritAttrs: false,
  props: {
    value: { // 双向绑定数据
      type: [String, Number],
      default() {
        return ''
      }
    },
    type: { // 输入框类型  1(搜索用)；2(表单用) 默认为1
      type: [Number, String],
      default() {
        return 1
      }
    },
    isTextarea: { // 是否需要复选框
      type: Boolean,
      default() {
        return false
      }
    },
    placeholder: { // 默认显示文字
      type: String,
      default() {
        return ' '
      }
    },
    oneBd: { // 单边框
      type: Boolean,
      default() {
        return false
      }
    },
    needClass: { // 需要绑定的class
      type: String,
      default() {
        return ''
      }
    },
    countNum: { // 是否需要计数
      type: Number,
      default() {
        return 80
      }
    },
    isSearch: { // 是否展示搜索摁钮
      type: Boolean,
      default() {
        return false
      }
    },
    searchFun: { // 搜索函数
      type: Function,
      default() {
        return () => {}
      }
    },
    inputFun: {
      type: Function,
      default() {
        return () => {}
      }
    },
    labelAndTip: { // 提示及校验信息
      type: Object,
      default() {
        return {
          label: '', // 左侧标题
          needCheck: false, // 是否需要校验
          needBlurCheck: false, // 是否需要失去焦点时校验
          tip: {
            trim: true, // Boolean 是否能为空
            type: null, // RegExp正则  是否判断value规则
            length: [] // Number 长度限制
          },
          showMyTip: {
            showHide: false, // //是否展示自己的提示
            tips: '' // 提示文案
          }
        }
      }
    }
  },
  data() {
    return {
      modelValue: this.value, // 双向数据绑定数据
      iconFocusBorder: false, // 搜索icon聚焦样式
      showTips: false, // 是否展示提示
      tips: '', // 提示信息
      num: this.countNum,
      textNum: 0
    }
  },
  watch: {
    value(newVal) {
      this.modelValue = newVal
    },
    modelValue(val) {
      if (val === undefined) {
        return
      }
      this.num = this.countNum - val.length
      this.textNum = val.length
      if (this.num <= 0) {
        this.num = 0
      }
    }
  },
  created() {

  },
  methods: {
    clearInput(){
      this.searchFun()
    },
    update() {
      this.$emit('input', this.modelValue)
      this.inputFun(this.modelValue)
    },
    checkValue(params) {
      this.iconFocusBorder = false
      if (this.labelAndTip.needCheck) {
        const { trim, type, length } = this.labelAndTip.tip
        if (trim && (/^\s*$/.test(this.modelValue) || this.modelValue === undefined)) {
          this.tips = this.placeholder
          this.showTips = true
          return false
        } else if (length && (this.modelValue.length < length[0] || this.modelValue.length > length[1])) {
          this.tips = '格式错误或长度超过限制，请重新输入！'
          this.showTips = true
          return false
        } else if (type && !type.test(this.modelValue)) {
          this.tips = '输入格式不正确，请重新输入！'
          this.showTips = true
          return false
        } else if (params && params.showTip) {
          this.tips = params.tips
          this.showTips = true
          return false
        } else {
          this.showTips = false
          this.tips = ''
          return true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor:#3b425d;// 主色调
$hoverColor:#1D143C;// 鼠标停留主色调浅色

.kInput{
  font-size: 14px;
  color: rgba(0,0,0,0.87);
  .inputParent{
    font-size: 14px;
    height: 100%;
    position: relative;
    right: 100px;
    ::v-deep .el-input{
        height: 48px;
        padding: auto;
    }
    ::v-deep .el-textarea{
        font-size: 14px;
    }
    ::v-deep .el-textarea__inner{
        min-height: auto !important;
        box-sizing: border-box;
    }
    ::v-deep .el-input__inner, ::v-deep .el-textarea__inner{
      width: 250px;
        height:100%;
        padding-right: 0;
        padding-left: 16px;
        line-height: 48px;
        border-radius:24px;
        border:1px solid #F8F7FB;
        background: #F8F7FB;
     

    }
    .inputIcon{
      height: 48px;
      width: 53px;
      margin: 0px;
      background: $mainColor;
      position: absolute;
      right: -80px !important;
      top: 0;
      border-radius:0px 24px 24px 0px;
      cursor: pointer;
      svg{
          font-size: 20px;
          position: absolute;
          left: 17px;
          top: 14px;
      }
    }
  }
}
.formInput{
  height: 80px;
  .fromLabel{
      float: left;
      // margin-right: 74px;
      line-height: 40px;
      font-family: PingFangSC-Regular;
      font-weight:500;
      color:rgba(44,48,64,1);
      font-size: 16px;
      .xing{
          width: 7px;
          height: 8px;
          margin-right: 9px;
          position: relative;
          top: -2px;
      }
      .noXing{
          width: 7px;
          height: 8px;
          margin-right: 9px;
          display: inline-block;
      }
  }
  .inputParent{
      position: relative;
      width: 224px;
      ::v-deep .el-input{
          height: 40px;
      }
      ::v-deep .el-input__inner, ::v-deep .el-textarea__inner{
          border:1px solid #C0C4CC;
          line-height: 40px;
          border-radius: 4px;
      }
      .countNumText{
          position: absolute;
          right: 12px;
          top: 166px;
          color:rgba(183,183,183,1);
          line-height:20px;

      }
  }
  .oneBd{
      position: relative;
      width: 631px;
      ::v-deep .el-input__inner{
          border-top: none;
          border-left: none;
          border-right: none;
          border-radius: 0;
      }
      .countNum{
          position: absolute;
          right: 0;
          font-size: 14px;
          color:rgba(183,183,183,1);
          line-height: 40px;
      }
  }

  .formTip{
      font-size: 14px;
      color: #F56666;
      line-height: 14px;
      margin-left: 0;
      text-align: left;
      margin-top: 8px;
      white-space:nowrap;
      svg{
          font-size: 14px;
          margin-right: 2px;
      }
  }
}
.isSearchAll{
  width: 200px !important;
  .isSearch {
      width: 100%;
  }
}
.inputIcon:hover{
  background: $hoverColor !important;
}
</style>
